<template>
  <div class="add-re">
    <span class="icon-remove_circle_outline" @click.stop="minus" v-if="carcontrolShow"></span>
    <span class="add-count" v-if="carcontrolShow">{{foods.count}}</span>
    <span class="icon-add_circle" @click.stop="add($event)"></span>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: 'CarControl',
  props: ['foods'],
  data () {
    return {
    }
  },
  mounted () {
  },
  watch: {
  },
  computed: {
    carcontrolShow () {
      let flag = true
      if (this.foods.count === 0) {
        flag = false
      }
      return flag
    }
  },
  methods: {
    // 减少数量
    minus () {
      this.foods.count--
      this.$store.commit('reFoods', this.foods)
    },
    // 增加数量
    add (event) {
      this.foods.count++
      this.$store.commit('addFoods', this.foods)
    },
    ...mapMutations(['getFoods'])
  }
}
</script>

<style lang="stylus" scoped>
.icon-remove_circle_outline {
  .icon-remove_circle_outline::before {
    content: '\e906'
  }
}

.icon-add_circle {
  .icon-add_circle::before {
    content: '\e900'
  }
}
.add-re{
  display flex
  align-items center
  .add-count {
    font-size: 0.2rem
    color: rgb(147, 153, 159)
    line-height: 0.48rem
    vertical-align: top
    margin 0 .12rem
  }
}

</style>
